<template>
    <div class="Echarts" >
        <div id="pie" ></div>
    </div>
</template>

<script>
    import * as category from '../../api/category'
    export default {
        name: "pieChart",
        data(){
            return{
                chartData: [
                    // {"value": 2, "name": '猫咪'},
                    // {"value": 1, "name": '小狗'},
                ]
            }
        },
        methods:{
            myEcharts(){
                let myEchart = this.$echarts.init(document.getElementById('pie'))
                let option = {
                    title: {
                        text: '宠物种类分布',
                        // subtext: '纯属虚构',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '种类',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: this.chartData
                        }
                    ]
                };
                myEchart.setOption(option)
            },
            initData(){
                let data=[]
                category.getCategory().then(function (response) {
                    let result =response.data.data
                    for (let dataKey in result) {
                        let one = {}
                        one['value']=result[dataKey].number
                        one['name']=result[dataKey].name
                        data.push(one)
                    }
                })
                return data
            }
        },
        mounted() {
            this.chartData=this.initData()
        },
        created() {

        },
        watch: {
            chartData(){
                this.myEcharts()
            }
        }

    }
</script>

<style scoped>
#pie{
    width:100%;
    height: 100%;
}
</style>
